<template>
  <div class="foodName">
      <h2>{{recipe.title}}</h2>
      <div class="text">
          <span v-if="recipe.comments_preceded">精品</span>
          <span v-if="recipe.views_count_text">浏览{{recipe.views_count_text}}</span>
          <span v-if="recipe.favo_counts">收藏{{recipe.favo_counts}}</span>
          <span v-if="recipe.dish_count">学做{{recipe.dish_count}}</span>
      </div>
  </div>
</template>

<script>
export default {
    props:["recipe"],
}
</script>

<style lang="less" scoped>
.foodName{
    padding: 15px;
    h2{
        font-weight: 600;
        font-size: 25px;
    }
    .text{
        margin-top: 5px;
        span{
            font-size: 14px;
            color: #797979;
            &::after{
                content: '';
                display: inline-block;
                width: 3px;
                height: 3px;
                border-radius: 50%;
                background-color: #797979;
                margin: 0 7px;
                vertical-align: middle;
            }
            &:last-child::after{
                content: "";
                display: none;
            }
        }
    }
}
</style>